$(function () {


  $.ajax({
    type: 'GET',
    url: 'https://gank.io/api/v2/banners',
    success(res) {
      res.data.forEach(function (item, index) {
        // console.log(item)
        $(`<div class="carousel-item ${index === 0 ? 'active' : ''}">
            <img src="${item.image}" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>${item.title}</h5>
            </div>
          </div>`).appendTo('.carousel-inner')
      })
    }
  })

  $.ajax({
    url: `https://gank.io/api/v2/random/category/Girl/type/Girl/count/1`,
    success(res) {
      const imgSrc = res.data[0].images[0]
      const desc = res.data[0].desc
      $('.my-card .card-img-top').attr('src', imgSrc)
      $('.my-card .card-body p').html(desc)
    }
  })

  $('.my-card .card-body .btn').on('click', function () {
    $.ajax({
      url: `https://gank.io/api/v2/random/category/Girl/type/Girl/count/1`,
      success(res) {
        const imgSrc = res.data[0].images[0]
        const desc = res.data[0].desc
        $('.my-card .card-img-top').attr('src', imgSrc)
        $('.my-card .card-body p').html(desc)
      }
    })
  })

  $.ajax({
    url: 'https://gank.io/api/v2/data/category/All/type/All/page/1/count/10',
    success(res) {
      res.data.forEach(function (item) {
        console.log(item)
        const imgSrc = item.images[0].startsWith('http') ? item.images[0] : './images/lyf.webp'
        $(`<div class="col-xl-3 col-lg-4 col-md-6 col-12">
          <div class="card" style="width: 100%;">
            <img src="${imgSrc}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">${item.title}</h5>
              <p>${item.desc}</p>
              <a href="article.html?id=${item._id}" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>`).appendTo('.my-list')
      })
    }
  })

  let page = 1
  $(document).on('scroll', function () {
    let st = $('html').scrollTop()
    let ah = $(document).height()
    if(document.documentElement.clientHeight + st === ah) {
      page += 1
      console.log(page)
      $.ajax({
        url: `https://gank.io/api/v2/data/category/All/type/All/page/${page}/count/10`,
        success(res) {
          res.data.forEach(function (item) {
            // console.log(item)
            const imgSrc = item.images[0].startsWith('http') ? item.images[0] : './images/lyf.webp'
            $(`<div class="col-xl-3 col-lg-4 col-md-6 col-12">
          <div class="card" style="width: 100%;">
            <img src="${imgSrc}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">${item.title}</h5>
              <p>${item.desc}</p>
              <a href="article.html?id=${item._id}" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>`).appendTo('.my-list')
          })
        }
      })
    }
  })

  // http://localhost:63342/ganhuo-bootcss5/article.html?id=61473dbde843bb1123b6b47d
  // http://localhost:63342/ganhuo-bootcss5/article.html?id=60516e00e843bb1123b6b458
})
